<script setup lang="ts">
import { ref, computed, reactive } from "vue";
import echart from "../../components/echart/echart.vue"
import { useProject } from "../project/useProject"
import navBar from "../../components/layout/navBar.vue"
import tavMenu from "../../components/layout/tabMenu.vue"
const props = defineProps<{}>()
const emit = defineEmits([])
const initData = reactive({

} as any)


const list =
{
    assessmentNumber: 10,
    eventNumber: 11,
    seriousEventNumber: 12,
    premium: 13,
    completeNumber: 14,
    completeMoney: 15,
    Insurance: 16,
    hazardSourceData: 17
}

</script>
<template>
    <div class="page">
        <navBar left="N" right="Y" title="提示信息"></navBar>
        <tavMenu selectMenu="industryMgt"></tavMenu>
        <div class="pmain">
            <div>
                <van-nav-bar class="navbar" title left-text="统计" right-text="筛选" />
                <van-cell title="111" label="项目数" />
            </div>
            <div>
                <tr>
                    <td>
                        <van-cell class="list" title="风险评估报告数" :label="list.assessmentNumber"></van-cell>
                    </td>
                    <td>
                        <van-cell class="list" title="风险事件数" :label="list.eventNumber"></van-cell>
                    </td>
                </tr>
                <tr>
                    <td>
                        <van-cell class="list" title="严重风险事件数" :label="list.seriousEventNumber"></van-cell>
                    </td>
                    <td>
                        <van-cell class="list" title="保费" :label="list.premium"></van-cell>
                    </td>
                </tr>
                <tr>
                    <td>
                        <van-cell class="list" title="完成理赔数" :label="list.completeNumber"></van-cell>
                    </td>
                    <td>
                        <van-cell class="list" title="完成理赔金额" :label="list.completeMoney"></van-cell>
                    </td>
                </tr>
                <tr>
                    <td>
                        <van-cell class="list" title="保额" :label="list.Insurance"></van-cell>
                    </td>
                    <td>
                        <van-cell class="list" title="危险源数量" :label="list.hazardSourceData"></van-cell>
                    </td>
                </tr>
            </div>

            <div class="echart">
                <echart></echart>
            </div>
        </div>
    </div>
</template>
<style scoped>
.page {
    background-color: rgba(66, 141, 228);
    display: flex;
    flex-direction: column;
}
.pmain {
    margin: 10px;
    border-radius: 10px;
    background-color: rgba(53, 125, 207, 0.842);
}

.page-top {
    height: 50px;
}
.ptop-left {
    color: white;
    float: left;
    margin-left: 15px;
    margin-top: 15px;
}
.ptop-right {
    color: white;
    float: right;
    margin-right: 15px;
    margin-top: 15px;
}
.navbar {
    background-color: rgb(130, 208, 247);
}
:deep(.van-nav-bar__text) {
    color: white;
    font-size: 20px;
}
.btnright {
    background-color: white;
    color: rgb(66, 141, 228);
}
:deep(.van-cell) {
    color: white;
    font-size: 20px;
    background-color: rgb(90, 170, 247);
}
td {
    width: 43%;
}
:deep(.van-cell__label) {
    color: rgb(189, 210, 245);
    font-size: 15px;
}
.echart {
    background-color: white;
}
</style>